<template>
     <span :class="getClass()" class="lightspot_wrapper" >

     </span>
</template>

<script>
    export default {
        name: "Lightspot",
        props:{
            type:{
                 type:String,
                required:false
            }
        },
        methods:{
            getClass(){
                if(this.type==='success'){
                    return "success_light"
                }else if(this.type==='danger'){
                    return "danger_light"
                }
                else if(this.type==='info'){
                    return "info_light"
                }
                else {
                    return "other_light"
                }
            }
        }
    }
</script>

<style scoped lang="sass">
    @import "../../styles/color"
    .success_light
       background: $success
    .info_light
       background: $info
    .danger_light
        background: $danger
    .other_light
        background: $primary
    .lightspot_wrapper
      display: inline-block
      width: 10px
      height: 10px
      border-radius: 5px
</style>
